﻿@model VaccineEbook.Models.ChapterModel.EditChapterModel
@{
    Layout = "~/Views/Chapter/_EditChapterLayout.cshtml";
    ViewBag.Title = "Edit";
}

@if (Model.ID <= 0)
{
    // add new page
    <h3>Add Chapter</h3>
}
else
{
    <h3>Edit: @Model.ChapterGroup</h3>
}

<div class="pull-left">
    <a href="@Url.Action("Edit", new { id=string.Empty })" class="btn btn-primary">Add new</a>
    @if (Model.ID > 0)
    {
        // edit => có nút
        <a href="@Url.Action("Edit", "Chapter", new { id = "", ChapterID = Model.ChapterID })" class="btn btn-success">Make new page</a>
        <a href="#" onclick="Confirm_DeleteChapter(@Model.ID, @Model.ChapterID)" class="btn btn-danger">Delete</a>
    }
    else
    {
        <a href="#" class="btn btn-success disabled">Make new page</a>
        <a href="#" class="btn btn-danger disabled" >Delete</a>
    }
    
</div>
@if ((string)Request.QueryString["ChapterID"] != null) {
    <nav class="pull-right">
        @Html.Action("_ListChapterGroupPartial", new { ChapterID = Request.QueryString["ChapterID"] })
    </nav>
}

<form class="form-horizontal" method="post">

    <div class="form-group">
        <div class="col-md-2 control-label"></div>
        <div class="col-md-10">
            @Html.ValidationSummary(true)
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-2 control-label">Group</label>
        @if (Model.ID <= 0)
        {
            // TODO: add new 2 type
            // add new page
            <div class="col-md-8">
                @if (Model.ChapterID <= 0)
                {
                    // add new width new chapterid
                    @Html.TextBoxFor(m => m.ChapterGroup, new { @class = "form-control", placeholder = "Header" })
                    @Html.ValidationMessageFor(m => m.ChapterGroup)
                }
                else
                {
                    // add new width exist chapterid
                    <label class="col-md-8 control-label" style="text-align:left">@Model.ChapterGroup</label>
                    @Html.HiddenFor(m => m.ChapterGroup)
                    @Html.HiddenFor(m => m.ChapterID)
                }

            </div>
        }
        else
        {
            <label class="col-md-8 control-label" style="text-align:left">@Model.ChapterGroup</label>
            @Html.HiddenFor(m => m.ChapterGroup)
        }

        <label class="col-md-1 control-label">Page</label>
        <label class="col-md-1 control-label" style="text-align:left">@Model.Page</label>
        @Html.HiddenFor(m => m.Page)
    </div>

    <div class="form-group">
        <label class="col-md-2 control-label">Icon</label>
        <div class="col-md-10">
            <img id="img-base" src="@Model.Icon" class="icon"/>
            <input type='file' id="input-base" style="display: none" />
            @Html.HiddenFor(m => m.Icon, new { id = "icon" })
            @Html.ValidationMessageFor(m => m.Icon)
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-md-2 control-label">Desciption</label>
        <div class="col-md-10">
            @Html.TextAreaFor(m => m.ChapterDescription, new { @class = "ckeditor", cols = "10", rows = "2" })
            @Html.ValidationMessageFor(m => m.ChapterDescription)
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Content</label>
        <div class="col-md-10">
            @Html.TextAreaFor(m => m.ChapterContent, new { @class = "ckeditor", cols = "10", rows = "2" })
            @Html.ValidationMessageFor(m => m.ChapterContent)
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="submit" class="btn btn-primary">Save</button>
            <a href="@Url.Action("Index")" class="btn">Back</a>
        </div>
    </div>
</form>

@section style{
    <style>
        .icon {
            min-width:20px; 
            height: 50px; 
            cursor: pointer;
            background-color: #eee;
        }
    </style>
}

@section script {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Content/ckeditor/ckeditor.js"></script>
    <script>
    var oldIcon = '@Model.Icon';
    // đổi ảnh
    document.getElementById("input-base").addEventListener("change", readImage, false);
    document.getElementById("img-base").addEventListener("click", function () {
        document.getElementById("input-base").click();
    }, false);

    function readImage() {
        if (this.files && this.files[0]) {
            var f = this.files[0];
            if (f.size > 10 * 1024) {
                alert("File size maximum 10kb");
                rollbackImage();
                return;
            }

            if (!f.type.match('image.*')) {
                alert("File not a image");
                rollbackImage();
                return;
            }

            var FR = new FileReader();

            FR.onload = function (e) {
                document.getElementById("img-base").src = e.target.result;
                document.getElementById("icon").value = e.target.result;
            };

            FR.readAsDataURL(this.files[0]);
        }
    }

    function rollbackImage() {
        document.getElementById("img-base").setAttribute("src", oldIcon);
        document.getElementById("icon").value = oldIcon;
    }

    // detete confirm
    function Confirm_DeleteChapter(id, chapterId) {
        if (confirm("Delete this page?")) {
            var url = '@Url.Action("Delete", "Chapter")';
            url += "?id=" + id;
            url += "&ChapterID" + chapterId; // to update page if fail
            location.href = url;
        }
    }
    </script>
}